<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!--width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。-->
    <!--initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>这是一些文本。</p>

    <div class="row">
        <div class="col-4" style="background-color:lavender;">col1</div>
        <div class="col-4" style="background-color:#fe5f75;">col2</div>
        <div class="col-4" style="background-color:lavender;">col3</div>
    </div>
    <div class="row">
        <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
        <div class="col-sm-3" style="background-color:#fe5f75;">.col-sm-3</div>
        <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
        <div class="col-sm-3" style="background-color:#fe5f75;">.col-sm-3</div>
    </div>
    <div class="row">
        <div class="col-sm-4" style="background-color:#fe5f75;">.col-sm-4</div>
        <div class="col-sm-8" style="background-color:lavender;">.col-sm-8</div>
    </div>

    <h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1>
    <h2>h2 Bootstrap 标题 (2rem = 32px)</h2>
    <h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>
    <h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4>
    <h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>
    <h6>h6 Bootstrap 标题 (1rem = 16px)</h6>

    <h1>Display 标题</h1>
    <p>Display 标题可以输出更大更粗的字体样式。</p>
    <h1 class="display-1">Display 1</h1>
    <h1 class="display-2">Display 2</h1>
    <h1 class="display-3">Display 3</h1>
    <h1 class="display-4">Display 4</h1>

    <h1>更小文本标题</h1>
    <p>small 元素用于字号更小的颜色更浅的文本:</p>
    <h1>h1 标题 <small>副标题</small></h1>
    <h2>h2 标题 <small>副标题</small></h2>
    <h3>h3 标题 <small>副标题</small></h3>
    <h4>h4 标题 <small>副标题</small></h4>
    <h5>h5 标题 <small>副标题</small></h5>
    <h6>h6 标题 <small>副标题</small></h6>


    <h1>高亮文本</h1>
    <p>使用 <mark>mark 元素来 高亮</mark> 文本。</p>

</div>
<div class="container-fluid">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p>
    <div class="row">
        <div class="col-6 col-sm-3 col-md-6 offset-md-6" style="background-color:#fe5f75;">
            <p>RUNOOB</p>
        </div>
        <div class="col-6 col-sm-9 col-md-6 offset-md-6" style="background-color:lavender;">
            <p>菜鸟教程</p>
        </div>
    </div>
</div>


<div class="container">
    <h1>Abbreviations</h1>
    <p>The abbr element is used to mark up an abbreviation or acronym:</p>
    <p>The <abbr title="啊哈啊哈大傻逼啊">WHO</abbr> was founded in 1948.</p>


    <h1>标题</h1>
    <p>简介</p>
    <blockquote class="blockquote">
        <p> 正文</p>
        <footer class="blockquote-footer">From 作者</footer>
    </blockquote>
</div>
<div class="container">
    <h1>kbd</h1>
    <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
    <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>


    <h1>pre</h1>
    <p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>

<div class="container">
    <h2>代表指定意义的文本颜色</h2>
    <p class="text-muted">柔和的文本。</p>
    <p class="text-primary">重要的文本。</p>
    <p class="text-success">执行成功的文本。</p>
    <p class="text-info">代表一些提示信息的文本。</p>
    <p class="text-warning">警告文本。</p>
    <p class="text-danger">危险操作文本。</p>
    <p class="text-secondary">副标题。</p>
    <p class="text-dark">深灰色文字。</p>
    <p class="text-light" style="color: mediumvioletred !important;">浅灰色文本（白色背景上看不清楚）。</p>
    <p class="text-white" style="color: mediumvioletred !important;">白色文本（白色背景上看不清楚）。</p>
</div>

<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h2>背景颜色</h2>
        <p class="bg-primary text-white">重要的背景颜色。</p>
        <p class="bg-success text-white">执行成功背景颜色。</p>
        <p class="bg-info text-white">信息提示背景颜色。</p>
        <p class="bg-warning text-white">警告背景颜色</p>
        <p class="bg-danger text-white">危险背景颜色。</p>
        <p class="bg-secondary text-white">副标题背景颜色。</p>
        <p class="bg-dark text-white">深灰背景颜色。</p>
        <p class="bg-light text-dark">浅灰背景颜色。</p>
    </div>
</div>

<div class="container">
    <img src="image/1.jpg" class="rounded float-left" alt="Cinque Terre" style="width: 30%">
    <img src="image/1.jpg" class="rounded-circle float-left" alt="Cinque Terre" style="width: 30%">
    <img src="image/1.jpg" class="img-thumbnail float-right" alt="Cinque Terre" style="width: 30%">
</div>

<div class="container">
    <div class="alert alert-success">
        <strong>成功!</strong> 指定操作成功提示信息。
    </div>
    <div class="alert alert-success">
        <strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
    </div>
    <div class="alert alert-success alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>成功!</strong> 指定操作成功提示信息。
    </div>
</div>
<div class="container">
    <div class="row" style="margin-top: 10px;">
        <button type="button" class="btn">基本按钮</button>
        <button type="button" class="btn btn-primary">主要按钮</button>
        <button type="button" class="btn btn-secondary">次要按钮</button>
        <button type="button" class="btn btn-success">成功</button>
        <button type="button" class="btn btn-info">信息</button>
        <button type="button" class="btn btn-warning">警告</button>
        <button type="button" class="btn btn-danger">危险</button>
        <button type="button" class="btn btn-dark">黑色</button>
        <button type="button" class="btn btn-light">浅色</button>
        <button type="button" class="btn btn-link">链接</button>
    </div>
    <div class="row" style="margin-top: 10px;">
        <button type="button" class="btn btn-outline-primary">主要按钮</button>
        <button type="button" class="btn btn-outline-secondary">次要按钮</button>
        <button type="button" class="btn btn-outline-success">成功</button>
        <button type="button" class="btn btn-outline-info">信息</button>
        <button type="button" class="btn btn-outline-warning">警告</button>
        <button type="button" class="btn btn-outline-danger">危险</button>
        <button type="button" class="btn btn-outline-dark">黑色</button>
        <button type="button" class="btn btn-outline-light text-dark">浅色</button>
    </div>
    <div class="row" style="margin-top: 10px;">
        <button type="button" class="btn btn-primary btn-lg">大号按钮</button>
        <button type="button" class="btn btn-primary">默认按钮</button>
        <button type="button" class="btn btn-primary btn-sm">小号按钮</button>
    </div>
    <div class="row" style="margin-top: 10px;">
        <button type="button" class="btn btn-primary btn-block" >按钮 1</button>
    </div>
    <div class="row" style="margin-top: 10px;">
        <button type="button" class="btn btn-primary active">点击后的按钮</button>
        <button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
        <a href="#" class="btn btn-primary disabled">禁止点击的链接</a>
    </div>
    <div class="row" style="margin-top: 10px;">
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary">Sony</button>
        </div>
    </div>
    <div class="row" style="margin-top: 10px;">
        <div class="btn-group" >
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary">Sony</button>
        </div>
    </div>
    <div class="row" style="margin-top: 10px;">
        <div class="btn-group btn-group-lg">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary">Sony</button>
        </div>
    </div>
    <div class="row" style="margin-top: 10px;">
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary">Sony</button>
        </div>
    </div>
    <div class="row" style="margin-top: 10px;">
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    Sony
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Tablet</a>
                    <a class="dropdown-item" href="#">Smartphone</a>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>